import { $getPolicyFile, $userOrderPeopleList } from "@/api/userCenter/userCenter";
import { CloseOutlined } from "@ant-design/icons-vue";
import { defineComponent, reactive } from "vue";
import styles from "./userOrderPopup.module.less";
export default defineComponent({
  setup(props, { expose }) {
    const state = reactive({
      order_no: '',
      people_list: [],
      isShow: false
    })
    
    // 打开弹窗
    const open = (e: string) => {
      state.isShow = true;
      state.order_no = e;
      $userOrderPeopleList({
        order_no: e,
      }).then((res: any) => {
        state.people_list = res.data || [];
      })
    }

    //下载电子保单
    const getPolicyFile = (people_id: number) => {
      $getPolicyFile({
        order_no: state.order_no,
        people_id: people_id,
      }).then((res: any) => {
        window.location.href = res.data?.url;
      })
    }

    expose({
      open,
    })

    return () => (
      <div class={styles['promptPopup-floating']} v-show={state.isShow}>
        <div class={styles.card}>
          <div class={styles['header-box']}>
            <span class={styles.title}>保单人员列表</span>
            <CloseOutlined class={styles['close-icon']} onClick={() => { state.isShow = false }} />
          </div>
          <div class={styles.container}>
            <div class={styles.thead}>
              <div class={styles.col}>姓名</div>
              <div class={styles.col}>证件类型</div>
              <div class={styles.col}>证件号</div>
              <div class={styles.col}>操作</div>
            </div>
            {
              state.people_list.map((item: any) => (
                <div class={styles.item}>
                  <div class={styles.value}>
                    <text>{item.name}</text>
                  </div>
                  <div class={styles.value}>
                    <text>{item.id_type === '111' ? '身份证' : '其他'}</text>
                  </div>
                  <div class={styles.value}>
                    <text>{item.id_no}</text>
                  </div>
                  <div class={styles.value} onClick={() => { getPolicyFile(item.id) }}>下载电子保单</div>
                </div>
              ))
            }
          </div>
        </div>
      </div>
    )
  }
})